<template>
	<div class="">
		<head-bar></head-bar>
		<head-nav  v-bind:focus="focus"></head-nav>
		<carousel></carousel>
		<div class="topic_text">专题精选&nbsp;&nbsp;<span>TOPICS</span></div>
		<topic></topic>
		<topic></topic>
		<div class="topic_text">精选活动&nbsp;&nbsp;<span>ACTIVITIES</span></div>
		<activity v-bind:color='color.red'></activity>
		<activity v-bind:color='color.yellow'></activity>
		<activity v-bind:color='color.green'></activity>
		<activity v-bind:color='color.blue'></activity>
		<about></about>
		<ifooter></ifooter>
	</div>
</template>

<script>
	import headBar from "../components/headBar.vue"
	import headNav from "../components/headNav.vue"
	import carousel from "../components/carousel.vue"
	import topic from "../components/topic.vue"
	import activity from "../components/activity.vue"
	import about from "../components/about.vue"
	import ifooter from "../components/ifooter.vue"
	
	export default{
		components:{
			headBar,
			headNav,
			carousel,
			topic,
			activity,
			about,
			ifooter,
		},
		data(){
			return {
				color:{
					red:'#e54d42',
					yellow: '#ffc300',
					green: '#39ca74',
					blue: '#3a99d8',
				},
				focus:1,
			}
		},
	}
</script>

<style lang="less" rel="stylesheet/less">
	.topic_text{
		margin: 0 auto;
		margin-top: 45px;
		width: 1200px;
		height: 28px;
		text-align: center;
		font-family: "微软雅黑";
		font-size: 1.6rem;
		font-weight: bold;
		span{
			font-weight: normal;
		}
		background-image: url("../assets/btbg.jpg");
		background-repeat: no-repeat;
		background-position: center center; 
	}
	ul{
		margin: 0;
		padding: 0;
		li{
			margin: 0;
			padding: 0;
			list-style: none;
		}
	}
</style>